<template>
  <el-tabs
    v-model="tabState.activeModuleId"
    type="card"
    @tab-click="tabState.tabClick"
  >
    <el-tab-pane label="桌面" :name="0">
      桌面3<br>
      第一次访问，速度会有点慢，因为需要加载json文件，作为meta信息。以后就快了，因为会缓存到indexedDB里面。
    </el-tab-pane>
    <el-tab-pane
      v-for="(item, index) in tabState.tabData"
      :key="'tab_' + item.id"
      :label="item.title"
      :name="item.id"
    >
      <template #label>
        <span>{{item.title}} &nbsp; &nbsp;
          <i class="el-icon-error" @click.stop="tabState.tabRemove(item.id, index)" ></i>
        </span>
      </template>
      <component
        :is="componentKind[item.componentKind]"
        :moduleId="item.id"
      >
      </component>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// 组件字典
import componentKind from './component.js'

// tab 的状态
import tabManage from '../../controller/state-tab.js'

</script>

<script setup>

// 列表的状态管理类
const { getState } = tabManage()
// 获取 tab 的状态
const tabState = getState()

</script>
